<template>
  <div class="innerPageTable-box-OneTwo innerPageTable-out-flex">
     <!-- 搜索区域 -->
    <SelfAdaption>
      <Form
        :model="searchForm"
        ref="modelForm"
        slot="adaption-bar"
        label-position="top"
        class="ivu-form-no-margin-bottom"
        inline
      >
        <Form-item prop="id" :label="$t('module.userManage.userGroupId')">
          <Input
            type="text"
            :maxlength="30"
            v-model.trim="searchForm.id"
            placeholder
            @on-enter="search"
          ></Input>
        </Form-item>
        <Form-item prop="name" :label="$t('module.userManage.userGroupName')">
          <Input
            type="text"
            :maxlength="30"
            v-model.trim="searchForm.name"
            placeholder
            @on-enter="search"
          ></Input>
        </Form-item>
        <Form-item prop="button" class="search-solt-btn">
           <RPButton optType="search" @click="search" />
           <RPButton optType="reset" @click="reset" />
        </Form-item>
      </Form>
    </SelfAdaption>
    <InnerPageTable ref="roleTable" :config="tableConfig" @page-change="pageChanged">
      <div slot="table-bar">
        <RPButton optType="create" @click="addOrEditRole('add')" />
      </div>
    </InnerPageTable>
  </div>
</template>
<script>
import { roleTableColumns } from './columns'
import { roleList, delUserGroup } from '@api/flowable/userManageAPI'
import roleEdit from './roleEdit.vue'
import assignPeople from '../userGroupManage/assignPeople.vue'
import menuManage from './menuManage.vue'
import assignResource from './assignResource.vue'
export default {
  name: 'roleManage',
  data() {
    return {
      searchForm: {
        id: '',
        name: ''
      },
      tableConfig: {
        loadDataFn: ({ responseProcess, param }) => {
          roleList(param).then(({ data }) => {
            let finalData = {}
            finalData.currentPage = data.data.pageNum
            finalData.recordCount = data.data.total
            finalData.recordList = data.data.list
            responseProcess(finalData)
          })
        },
        columnsFn: roleTableColumns.bind(this),
        autoFirst: true
      }
    }
  },
  methods: {
    search() {
      this.$refs['roleTable'].load(this.searchForm)
    },
    reset() {
      this.$refs['modelForm'].resetFields()
      this.search()
    },
    addOrEditRole(row) {
      new this.$pageModal(
        roleEdit,
        {
          props: {
            roleInfo: row == 'add' ? {} : row
          }
        },
        data => {
          if (data && data.id) {
            this.$refs['roleTable'].load(this.searchForm, this.currentPageNum)
          } else if (data) {
            this.currentPageNum = 1
            this.search()
          }
        }
      )
    },
    pageChanged(page) {
      this.currentPageNum = page
    },
    //分配成员
    assignPeople(row) {
      this.sidelip = new this.$sidelipPage(
        assignPeople,
        {
          props: {
            userGroupInf: row,
            manageType: 'role'
          }
        },
        () => (this.sidelip = null),
        this
      )
    },
    //分配资源
    assignResource(row) {
      this.sidelip = new this.$sidelipPage(
        assignResource,
        {
          props: {
            roleInfo: row
          }
        },
        () => (this.sidelip = null),
        this
      )
    },
    deleteRole(row) {
      new $confirm(this.$t('common.warning.confirmToDelete'), this).then(() => {
        delUserGroup({ id: row.id }).then(res => {
          this.search()
          this.$Message.success(this.$t('common.deleteSuccess'))
        })
      })
    },
    setMenu(row) {
      new this.$pageModal(
        menuManage,
        {
          props: {
            roleInfo: row
          }
        },
        data => {}
      )
    }
  }
}
</script>